<template>
  <div class="container">
    <el-col :span="4">
      <el-avatar :size="100"></el-avatar>
      <el-button>上传头像</el-button>
    </el-col>
    <el-col :span="20">
			<el-col class="isEdit" :span="4" :offset="20">
				<!-- <el-switch v-model="isEdit" active-text="编辑" inactive-text="查看" @change="handleSwitch"></el-switch> -->
				<!-- <el-radio-group v-model="isEdit">
					<el-radio-button label="false">查看</el-radio-button>
					<el-radio-button label="true">编辑</el-radio-button>
				</el-radio-group> -->
				<el-checkbox v-model="isEdit">查看/编辑</el-checkbox>
			</el-col>
			<el-form class="infoForm" v-if="isEdit" label-width="100px">
				<el-form-item label="昵称">
					<el-input v-model="infoForm.nickname"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="infoForm.gender">
						<el-radio label="男">男</el-radio>
						<el-radio label="女">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="地区">
					<el-cascader 
					:options="options" 
					v-model="infoForm.region"
					@change="handleChange"
					></el-cascader>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="infoForm.phone" maxlength="11" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="infoForm.email"></el-input>
				</el-form-item>
				<el-form-item label="个人简介">
					<el-input v-model="infoForm.introduce" type="textarea"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary">保存修改</el-button>
				</el-form-item>
			</el-form>
      <el-descriptions v-else class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            昵称
          </template>
          kooriookami
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 邮箱 </template>
          hebeiwsl2000@qq.com
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            地区
          </template>
          苏州市
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 性别 </template>
          <el-tag size="small">女</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 个人简介 </template>
          我是一个神秘的人
        </el-descriptions-item>
      </el-descriptions>

			
    </el-col>
  </div>
</template>

<script>
// 导入省市数据
import citys from '../data/cityData.json';
export default {
  data() {
    return {
      isEdit: false,	// 查看/编辑
			infoForm: {
				nickname: '',
				gender: '',
				region: '',
				phone: '',
				email: '',
				introduce: ''
			},
			options: []		// 级联选择器数据
    };
  },
	methods: {
		handleChange(value){
			console.log(this.infoForm.region)
		},
		handleSwitch(value){
			console.log('切换后的值是：', value)
		}
	},
	beforeCreate(){
		// console.log('beforeCreate', this.infoForm.nickname);
	},
	created(){
		this.options = citys;
	},
};
</script>


<style lang="less" scoped>
.container {
  margin-top: 20px;
	.isEdit{
		margin-bottom: 26px;
	}
	.infoForm{
		text-align: left;
	}
}
</style>